<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #outer {
            border: 1px solid green;
            width: 700px;
            height: 800px;
            margin: auto;
            padding-top: 20px;
        }

        table {
            margin: auto;
        }

        table,
        th,
        td {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }

        th,
        td {
            width: 120px;
            height: 30px;
            text-align: center;
        }
        #add_btn,#sort_btn{
            color: #fff;
            background-color: green;
            border: 0;
            width: 100px;
            height: 30px;
            border-radius: 5px;
        }

        #del_btn{
            color: #fff;
            background-color: red;
            border: 0;
            width: 100px;
            height: 30px;
            border-radius: 5px;
        }

        #outer a{
            text-decoration: none;
            color: red;
            font-size: 12px;
        }
        #phone_name{
            height: 25px;
            width: 200px;
            border: 1px solid orangered;
            border-radius: 5px;
        }

        #search_btn{
            color: #fff;
            background-color: green;
            border: 0;
            width: 100px;
            height: 30px;
            border-radius: 5px;
        }
        a:hover{
            cursor:pointer
        }
    </style>
</head>

<body>
    <div id="outer">
        <div style='width: 616px;margin: auto'>
            <h5>任务一:全选和全不选;任务二:完成添加一行</h5>
            <h6>任务三:删除选中行;任务四:删除单行</h6>
            <h6>任务五:模糊查询</h6>
            <h6>任务六:改变购物车数量 => 可编辑表格<br>
               1. 双击td-td内部会出现一个input输入框<br>
               2. td内部原来的值应该要被设置到这个input框中<br>
               3. 可以在input框中重新输入一个数量
               4. 给这个input增加onblur事件=>td中移除input,input输入的新值要出现在td中
            </h6>
        </div>

        <div style="width: 616px;margin: auto;">
            <button id="add_btn" type="button" @click="addLine()">添加一行</button>
            <button id="del_btn" type="button" @click="delMore()">删除选中行</button>

            <button id="sort_btn" type="button" @click="sortType=!sortType">价格升序/降序</button>
        </div>
        <div style="width: 616px;margin:5px auto;">
            <!-- 失去焦点事件onblur -->
            <input type="text" v-model="keywords" placeholder="输入商品名称模糊查询">
            <button @click="search()">查询</button>
        </div>
        <div style="margin-top: 5px;">
            <table>
                <thead>
                    <tr>
                        <th><input type="checkbox" v-model="isChecked" @click="selectAll"></th>
                        <th>序号</th>
                        <th>商品名称</th>
                        <th>单价</th>
                        <th>购买数量</th>
                        <th>操作选项</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in cartList" :key="item.id">
                        <td><input type="checkbox" :value="item.id" v-model="ids" class="ck"></td>
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.price}}</td>
                        <!-- 双击事件 -->
                        <td>{{item.num}}</td>
                        <td><a @click="del(item.id)">删除</a></td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="5">
                            <span style="color: red;font-size: 20px;">总价:<span id="total_span">{{total}}元</span></span>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    <!-- <script src="../js/decimal.js"></script> -->
    <script src='plugins/vue2.js'></script>
    <script>
        new Vue({
            el:'#outer',
            data:{
                keywords:'',
                carts:[{"id":1001,"name":"iphone16","price":4999.99,"num":3},
                        {"id":1002,"name":"mi15","price":3999.99,"num":3},
                        {"id":1003,"name":"iphone14","price":2999.99,"num":10},
                        {"id":1004,"name":"mi13","price":2000,"num":2},
                        {"id":1005,"name":"iphone12","price":3000,"num":5}],
                cartList:[],
                //全选和全不选复选框 - ids数组负责收集下面的checkbox的值的
                ids:[],
                isChecked:false,
                sortType:true
            },
            // computed:{
            //     //因为此处的keywords在不断发生变量,所以会重新计算
            //     cartList(){
            //         return this.carts.filter(c=>c.name.indexOf(this.keywords)!=-1)
            //     }
            // },

            computed:{
                total(){
                    let n = 0;
                    this.ids.forEach(id=>{
                        this.cartList.forEach(c=>{
                        if(c.id==id){
                            n+=c.price*c.num
                        }
                     })
                    })
                    return n;
                }
            },
        
            watch:{
                sortType(){
                    //排序的方法是会对原来的数组造成影响的
                    if(!this.sortType){//降序
                        this.cartList.sort((c1,c2)=>c1.price-c2.price)
                    }else{//升序
                        this.cartList.sort((c1,c2)=>c2.price-c1.price)
                    }
                    //console.log(this.carts)

                    // setTimeout(()=>{
                    //     this.cartList = this.carts
                    // },3000)
                },
                keywords:{
                    immediate:true,
                    handler(newValue){
                        //filter方法不会对原来的数组造成影响
                        this.cartList = this.carts.filter(c=>c.name.indexOf(this.keywords)!=-1)
                    }
                },
                ids(){
                    if(this.ids.length!=this.cartList.length){
                        this.isChecked=false                        
                    }
                    //遍历ids
                    this.ids.forEach(id=>{
                        //遍历最原始的购物车
                        this.carts = this.carts.filter(c=>c.id!=id)   
                        //计算总
                    })
                }
            },

            methods:{
                delMore(){
                    if(confirm('确认删除吗?')){
                        //判断是否有选中的
                        if(this.ids.length==0){
                            alert('sorry,请先勾选!')
                            return
                        }
                        //有勾选的
                        this.cartList = this.carts;
                    }
                },
                selectAll(){
                    //判断标题行的checkbox是否是选中的
                    if(this.isChecked){//取消全选
                        this.ids=[]
                    }else{
                        //向ids数组中添加数据
                        this.cartList.forEach(c=>this.ids.push(c.id))
                    }  
                },
                search(){
                    console.log(this.keywords)
                    this.cartList = this.carts.filter(c=>c.name.indexOf(this.keywords)!=-1)
                },
                del(id){
                    //希望数组发生改变的
                    for(let i=0;i<this.carts.length;i++){
                        if(this.carts[i].id==id){
                            this.carts.splice(i,1)//会对carts改变的
                        }
                    }
                }
            } 
        });
    </script>
</body>
</html>